<template>
	<view>
		<topbar :title="title" jt_c="2" background="background:#222222;color:#fff;"></topbar>
		<view class="content">
			<view class="top dis_f_sb_c">
				<view class="dis_f_l_c" style="width: 100%;">
					<image :src="src" mode="aspectFill"></image>
					<view class="dis_f_sb_c" style="width: calc(100% - 98rpx);">
						<view class="dis_f_co">
							<view class="title">{{zhaohao}}</view>
							<view class="text">{{user.name}}</view>
						</view>
						<view class="dis_f_co">
							<view class="title">当前余额</view>
							<view class="text" v-if="type == cz">￥{{user.currency}}</view>
							<view class="text" v-else>￥{{user.money}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="top dis_f_co">
				<view class="title" style="margin-bottom: 28rpx;">{{text}}</view>
				<!-- <view class="dis_f_sb_c dis_f_w">
					<view v-for="(item,index) in je_list" :key="item.id" @click="selectColor(index,item)">
						<view class="jin_e dis_f_c_c" :class="[ item.selected ? 'jin_e2' : 'jin_e']">{{item.name}}{{text1}}
						</view>
					</view>
				</view> -->
				<u-input v-model="je" placeholder="请输入金额" type="number" :border="true" @input="testMoney"></u-input>
				<view style="color: #777;font-size: 22rpx;margin-top: 20rpx;">{{text2}}</view>
			</view>
		</view>
		<view class="next dis_f_c_c" v-if="cz == 0" @click="go_next">{{text3}}</view>
		<view class="next dis_f_c_c" v-if="cz == 1" @click="pay">{{text3}}</view>
	
	<u-keyboard
		default=""
		ref="uKeyboard" 
		mode="number" 
		:mask="true" 
		:mask-close-able="false"
		:dot-enabled="false" 
		v-model="show"
		:safe-area-inset-bottom="true"
		:tooltip="false"
		@change="onChange"
		@backspace="onBackspace">
		<view>
			<view class="u-text-center u-padding-20 money">
				<text>{{je}}</text>
				<text class="u-font-20 u-padding-left-10">元</text>
				<view class="u-padding-10 close" data-flag="false" @tap="showPop(false)">
					<u-icon name="close" color="#333333" size="28"></u-icon>
				</view>
			</view>
			<view class="u-flex u-row-center">
				<u-message-input 
					mode="box" 
					:maxlength="6"
					:dot-fill="true"
					v-model="password"
					:disabled-keyboard="true"
					@finish="finish"
				></u-message-input>
			</view>
			<view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips">支付键盘</view>
		</view>
	</u-keyboard>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: '',
				// 充值金额
				je_list: [{
						name: '1',
						id: 1,
						selected: false
					},
					{
						name: '10',
						id: 2,
						selected: false
					},
					{
						name: '20',
						id: 3,
						selected: false
					},
					{
						name: '100',
						id: 4,
						selected: false
					},
					{
						name: '500',
						id: 5,
						selected: false
					},
					{
						name: '1000',
						id: 6,
						selected: false
					}
				],
				je:'',
				text:'',
				text1:'',
				text2:'',
				text3:'',
				user:'',
				type:0,
				title:'',
				cz:0,
				zhaohao:'',
				show:false,
				password:'',
			};
		},
		onLoad(opt) {
			
			if (opt.type == 1) {
				this.type = opt.type
				this.src = '../../static/mine/vx.png'
			} else {
				this.type = opt.type
				this.src = '../../static/mine/zfb.png'
			}
			
			if (opt.cz == 1) {
				this.cz = opt.cz
				this.title = '充值'
				this.text = '充值金额'
				this.text1 = '金币'
				this.text2 = '金币价格：1.00元=1金币'
				this.text3 = '确认充值'
			} else {
				this.cz = 0
				this.title = '提现'
				this.text = '提现金额'
				this.text1 = '元'
				this.text2 = '提现扣除手续费4%'
				this.text3 = '确认提现'
			}
			this.getuser()
		},
		methods: {
			testMoney(e){
				 let that = this;
				                let price = e
				                if (price.indexOf(".") == 0) {
				                    //'首位小数点情况'
				                    price = price.replace(/[^$#$]/g, "0.");
				                    price = price.replace(/\.{2,}/g, ".");
				                } 
				                price = price.match(/^\d*(\.?\d{0,2})/g)[0] || null;
				                  //重新赋值给input
				                this.$nextTick(() => {
				                    this.je = price;
				                });
			},
			showPop(flag = true){
				this.password = '';
				this.show = flag;
			},
			onChange(val){
				// console.log(this.password)
				if(this.password.length<6){
					this.password += val;
					
				}
				
				if(this.password.length>=6){
					console.log(this.password)
					this.$.ajax(1, 'post', 'index/checkpaypassword', {
						uid:uni.getStorageSync('uid'),
						token:uni.getStorageSync('token'),
						password:this.password,
					}, (res) => {
						console.log(res)
						if(res.code == 1){
							this.$.ajax(1, 'post', 'index/settixianlog', {
								uid:uni.getStorageSync('uid'),
								token:uni.getStorageSync('token'),
								money:this.je,
								cate:this.type,
								account:this.zhaohao
							}, (res) => {
								console.log(res)
								if(res.code == 1){
									this.getuser()
									this.show = false
									this.password = ''
									this.$.ti_shi(res.msg)
									setTimeout( () => {
										uni.switchTab({
											url:'/pages/mine/mine'
										})
									}, 1000)
								}else{
									this.$.ti_shi(res.msg)
								}
								
							})
							// this.$.ti_shi(res.msg)
						}else{
							this.password = ''
							this.$.ti_shi(res.msg)
						}
						
					})
					// this.pay();
				}
			},onBackspace(e){
				if(this.password.length>0){
					this.password = this.password.substring(0,this.password.length-1);
				}
			},
			pay()
		{
			if(this.je == ''){
				this.$.ti_shi('请选择充值金额');return;
			}
			
			
			
			
			
			
			
			
			
			
			
			if(this.type== 1){//微信支付
				this.$.ajax(1, 'post', 'wxpay/wxpay', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token'),
					money:this.je,
				}, (res) => {
					// console.log(res)
					if(res.code == 1){
						// console.log(res.data.timestamp)
					uni.requestPayment({
					    provider: 'wxpay',
						orderInfo: {
										"appid": res.data.appid,
										"noncestr": res.data.noncestr,
										"package": "Sign=WXPay",
										"partnerid": res.data.partnerid,
										"prepayid": res.data.prepayid,
										"timestamp": res.data.timestamp,
										"sign": res.data.sign
									},
					    success: function (res) {
					        console.log(res);
					    },
					    fail: function (err) {
					        console.log('fail:' + JSON.stringify(err));
					    }
					});
					}else{
						this.$.ti_shi(res.msg);
						return;
					}
					
				})
			}else if(this.type== 2){
				this.$.ajax(1, 'post', 'alipay/recharge', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token'),
					money:this.je,
				}, (res) => {
					console.log(res)
					if(res.code == 1) {
						uni.requestPayment({
							provider: 'alipay',
							orderInfo: res.data,
							success: function (res) {
								console.log(res);
							},
							fail: function (err) {
								console.log('fail:' + JSON.stringify(err));
							}
						});
					}else{
						this.$.ti_shi(res.msg);
						return;
					}
				})
			}
		},
		getuser(){
				this.$.ajax(1, 'post', 'index/getuser', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token'),
				}, (res) => {
					// console.log(res)
					if(res.code == 1){
						this.user = res.userinfo
						if(this.cz !=1){
							this.text2 = '提现扣除手续费'+this.user.shouxu * 100+'%'
						}
						if(this.type == 1){
							this.zhaohao = this.user.wechat
						}else{
							this.zhaohao = this.user.alipay
						}
					}
					
				})
			},
			selectColor(index, item) {
				let that = this
				for (let items in that.je_list) { //这个循环的时候要用for in 来遍历 当前选中下标为true 其他的下标为false 避免多选
					that.je_list[items].selected = false;
					that.je_list[index].selected = true;
					that.je = that.je_list[index].name ;
				}
				console.log(that.je)
			},
			go_next(){
				if(this.je == ''){
					this.$.ti_shi('请选择提现金额');return;
				}
				this.show = true
				
					
				
				
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		padding-top: calc(var(--status-bar-height) + 88rpx);

		.top {
			width: 100%;
			// height: 152rpx;
			background-color: #fff;
			padding: 36rpx 48rpx;
			margin-bottom: 18rpx;
			color: #222222;

			image {
				width: 80rpx;
				height: 80rpx;
				margin-right: 18rpx;
			}

			.title {
				font-size: 28rpx;
				line-height: 40rpx;

				margin-bottom: 8rpx;
			}

			.text {
				font-size: 22rpx;
				line-height: 32rpx;

			}

		}
	}

	.jin_e {
		border: 1rpx solid #EEEEEE;
		border-radius: 10rpx;
		width: 194rpx;
		height: 66rpx;
		color: #222;
		background-color: #fff;
		margin-bottom: 36rpx;
		border-radius: 38rpx;
	}

	.jin_e2 {
		border: none;

		background-color: #E23C63;
		width: 194rpx;
		height: 66rpx;
		color: #fff;
		margin-bottom: 36rpx;
		border-radius: 38rpx;
	}
	.next{
		position: fixed;
		bottom: 84rpx;
		left: 24rpx;
		width: 702rpx;
		height: 98rpx;
		border-radius: 50rpx;
		background-color: #E23C63;
		color: #fff;
	}.money{
		font-size: 80rpx;
		color: $u-type-warning;
		position: relative;
		
		.close{
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			line-height: 28rpx;
			font-size: 28rpx;
		}
	}
	.tips{
		color:$u-tips-color;
	}
	.zf_btn{
		color: #fff;
		background-color: #E23C63;
		border-radius: 20rpx;
		width: 100%;
		height: 88rpx;
	}
</style>
